<template>
  <basic-dialog
    class="basic-drawer"
    title="机构详情"
    :visible="visible"
    :width="1000"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :has-footer="false"
    @open="handleOpen"
    @closed="handleClose"
  >
    <section class="flex items-center justify-between mb-4">
      <el-radio-group v-model="activeName" size="large" class="radio-content">
        <el-radio-button value="organ">机构信息</el-radio-button>
        <el-radio-button value="csr">CSR</el-radio-button>
        <el-radio-button value="secretKey">私钥</el-radio-button>
      </el-radio-group>
      <el-button
        v-if="activeName === 'csr' && organDetail?.csr"
        v-copy:both="organDetail?.csr"
        link
        type="primary"
        >复制</el-button
      >
      <el-button
        v-if="activeName === 'secretKey' && organDetail?.private_key"
        v-copy:both="organDetail?.private_key"
        link
        type="primary"
        >复制</el-button
      >
    </section>
    <organ-info v-if="activeName === 'organ'" :record="organDetail!" />
    <csr-info v-else-if="activeName === 'csr'" :record="organDetail!" />
    <secret-key-info v-else :record="organDetail!" />
  </basic-dialog>
</template>
<script lang="ts" setup>
import type { SelfCertDetailModel, SelfCertModel } from '@/apis/model/selfCert'

import CsrInfo from '../components/CsrInfo.vue'
import OrganInfo from '../components/OrganInfo.vue'
import SecretKeyInfo from '../components/SecretKeyInfo.vue'
interface IProps {
  visible: boolean
  record: SelfCertModel
  loading?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  loading: false
})
// 刷新表格事件
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'refresh'): void
}
const emit = defineEmits<IEmit>()
const activeName = ref('organ')
const organDetail = ref<SelfCertDetailModel>()
const copyContent = ref('')
watchEffect(() => {
  if (activeName.value === 'csr') {
    return organDetail.value?.csr!
  }
  if (activeName.value === 'secretKey') {
    return organDetail.value?.private_key!
  }
})
const getDetail = () => {
  emit('update:loading', true)
  getSelfCertApi({ id: props.record?.id! })
    .then(res => {
      organDetail.value = res
      copyContent.value = organDetail.value?.csr!
    })
    .finally(() => emit('update:loading', false))
}
//弹窗打开
const handleOpen = () => {
  getDetail()
}

//弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
  emit('refresh')
  activeName.value = 'organ'
}
</script>

<style lang="scss" scoped>
.custom-tabs {
  :deep(.el-tabs__nav-wrap)::after {
    height: 0px;
  }
}
</style>
